<template>
  <div class="jyjc-content">
    <div class="jyjc-content-title">
      <div class="jyjc-content-title-item" v-for="item in [
        '监测:36',
        '监测:36',
        '监测:36',
        '监测指标:36',]" :key="item">
        {{ item }}
      </div>
    </div>
    <div class="jyjc-content-btn">
      <div class="jyjc-content-btn-item" v-for="(item, index) in btnitem" :key="index" @click="btnitemsub(item)">
        <img class="jyjc-content-btn-item-img" :src="getAssetsFile('jyjc', item.url)" />
        <div class="jyjc-content-btn-item-text">{{ item.name }}</div>
      </div>
    </div>
  </div>
  <div v-if="isJyjctable" class="Jyjctable-con">
    <Jyjctable :isstyle="stylelin.style" />
  </div>
  
  <Eldioa :headtext="Eldioaform.headtext" :dialogVisible="editdialogVisible" @eddialogVisible="updateDialogVisible"
    :elwidth="Eldioaform.elwidth" :elheight="Eldioaform.elheight">
    <template #dialogbody>
      <Elfrom v-if="Eldioaform.headtext == '接取事件'" :form-config="editformdataconfig" v-model="editform"
        :show-actions="false" @elsubmit="elsubmitbtn" ref="editformRef" />
      <!--  -->
      <Jyjcformslot v-else @elsubmit="elsubmitbtn" ref="Jyjcformslotref" />
      <!--  -->
      <div class="dialog-footer" style="text-align: right;">
        <el-button type="primary" style="background: rgba(4, 134, 254, 1);" @click="elhandleSubmit">
          确认
        </el-button>
        <el-button style="background: transparent;border:1px solid rgba(89, 175, 249, 0.70);color:rgba(1, 194, 255, 1)"
          @click="handleCancel">
          取消
        </el-button>
      </div>
    </template>
  </Eldioa>

</template>

<script setup>
import { ref, onMounted, provide, computed, toRefs } from 'vue'
import { getAssetsFile } from "@/utils/compnt.js";
import Jyjctable from './components/jyjctable/index.vue'

import formConfig from './jyformconfig'
import { postsimulationtask, getsimulationdisList, getsimulationdisListId, putsimulationsuccListId, getteamName, getteamNameGroup } from '@/api'
import Eldioa from '@/components/eldioa/index.vue'
import Elfrom from '@/components/elfrom/index.vue'
import Jyjcformslot from './components/jyjcformslot/index.vue'

onMounted(() => { })


//  事件管理
const stylelin = {
  // style: "width: 500px; height: 400px;"
  style: "width: calc(963/16 *1rem); height: calc(630/16 *1rem);"
}

const isJyjctable = ref(false)

const btnitem = ref([

  {
    url: 'luxiangh',
    name: '路线规划'
  },
  {
    url: 'shijiangl',
    name: '事件管理'
  },
  {
    url: 'jiequsj',
    name: '接取事件'
  },
  {
    url: 'jiequren',
    name: '接取伤员信息'
  }
])

const btnitemsub = (item) => {
  switch (item.name) {
    case '事件管理':
      isJyjctable.value = true
      break;
    case '接取事件':
      Dispatchtask()
      break;
    case '接取伤员信息':
      Dispatchitembtn()
      break;

  }


}

const tableformbtndata = (item) => {
  console.log('tableformbtndata', item)
  isJyjctable.value = false
}

provide('tablebtnfun', tableformbtndata)

// 接取信息
const simulationdisList = ref([])

const getsimulationdisListapi = async () => {
  const { data } = await getsimulationdisList()
  simulationdisList.value = data
}


const Dispatchtask = async () => {

  editdialogVisible.value = true
  Eldioaform.value.headtext = '接取事件'
  Eldioaform.value.formtype = '接取事件'
  Eldioaform.value.elheight = 400

  // const teamName = await getteamName()

  // editformdataconfig.value[1].columns[1].options = teamName.data

  // resetFieldsform(editform.value, editformdata.value)

  // setTimeout(() => {
  //   editformRef.value?.clearValidate()
  // }, 100)

}



const Dispatchitembtn = async (btndata) => {

  editdialogVisible.value = true
  Eldioaform.value.headtext = '任务详情'
  Eldioaform.value.formtype = '任务详情'
  Eldioaform.value.elheight = 650
  setTimeout(() => {
    Jyjcformslotref.value.clearValidate()
  }, 100)
}







const Eldioaform = ref({
  headtext: '接取事件',
  elwidth: 746,
  elheight: 400,
  formtype: '新增'
})




const editdialogVisible = ref(false)

const updateDialogVisible = (newValue) => {
  editdialogVisible.value = newValue
  if (Eldioaform.value.headtext == '接取事件') {
    editformRef.value.handleReset()

    resetFieldsform(editform.value, editformdata.value)
  } else {
    Jyjcformslotref.value.handleReset()
  }
}



const editformdataconfig = computed(() => {

  let formconfig = null
  switch (Eldioaform.value.formtype) {
    case '接取事件':

      formconfig = formConfig.TemplateGeneration
      break;

    case '任务详情':
      // formconfig = formConfig.TemplateGenerationitem
      break;

  }


  return formconfig

})

// 表单数据
const editformdata = computed(() => {
  let formdata = null
  switch (Eldioaform.value.formtype) {
    case '接取事件':
      formdata = formConfig.TemplateGenerationdata

      break;
    case '任务详情':
      // formdata = formConfig.TemplateGenerationitemdata

      break;

  }

  return formdata
})


// 表单数据
const editform = ref({ ...editformdata.value })

const editformRef = ref()
const Jyjcformslotref = ref()


// 根据按钮属性提交表单
const elsubmitbtn = async (editsubdata) => {
  console.log('editsubdata', editsubdata)
  switch (Eldioaform.value.formtype) {
    case '接取事件':
      // const mnxl_simulateEventType = sessionStorage.getItem('mnxl_simulateEventType')
      // editsubdata.simulateEventType = mnxl_simulateEventType || 'H辐射'
      // await postsimulationtask(editsubdata)
      // await getsimulationdisListapi()

      resetFieldsform(editform.value, editformdata.value)
      break;
    case '任务详情':
      console.log('asdasd')
      break;
  }
  handleCancel()
}


// 确认表单
const elhandleSubmit = async () => {

  // if (!editformRef.value) return
  try {
    if (Eldioaform.value.headtext == '接取事件') {
      await editformRef.value.handleSubmit()
    } else {
      await Jyjcformslotref.value.submitForm()
    }
  } catch (error) {
    console.error('表单提交失败:', error)
  }
}


// 关闭
const handleCancel = () => {
  if (Eldioaform.value.headtext == '接取事件') {
    editformRef.value.handleReset()
    resetFieldsform(editform.value, editformdata.value)
  } else {
    Jyjcformslotref.value.handleReset()
  }
  editdialogVisible.value = false
}

// 重置表单
const resetFieldsform = (form, comform) => {

  Object.keys(form).forEach(key => {

    if (key in comform) {
      form[key] = comform[key]
    } else {
      form[key] = ''

    }

  })


}
</script>

<style lang="less" scoped>
.jyjc-content {
  position: absolute;
  width: 532px;
  height: 75px;
  color: #fff;
  left: 485px;
  z-index: 3;
  text-align: center;
  line-height: 75px;

  .jyjc-content-title {
    width: 310px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .jyjc-content-title-item {
      height: 17px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #A8D6FF;
      line-height: 17px;

    }
  }

  .jyjc-content-btn {
    margin-top: 16px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .jyjc-content-btn-item {
      display: flex;
      align-items: center;
      background: rgba(47, 109, 255, 0.2);
      border-radius: 4px;
      border: 1px solid #2F6DFF;
      padding: 8px 10px;
      cursor: pointer;

      .jyjc-content-btn-item-img {
        width: 18px;
        height: 18px;
      }

      .jyjc-content-btn-item-text {

        height: 24px;
        font-family: PingFangSC, PingFang SC;
        margin-left: 6px;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 24px;

      }

    }

    .jyjc-content-btn-item:hover {
      opacity: 0.5;
    }

  }
}

.Jyjctable-con {
  position: absolute;
  top: 225px;
  left: 25vw;
  z-index: 10;
}
</style>